import React, { useEffect } from 'react';
import { Segmented } from 'antd';
import styled from '@emotion/styled';
import { useTTSBoardCast } from '../../Context/TTSBoardCastContext';
import useSyncState from '../../hooks/useSyncState';
import { SegmentedValue } from 'antd/lib/segmented';

const VariableContainer = styled.div``;

const RoleListContainer = styled.div`
	display: flex;
	margin-bottom: 20px;
`;

const Tabs = styled(Segmented)`
	margin-bottom: 14px;
`;

const RoleItem = styled.div`
	width: 124px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid;
	margin-right: 14px;
	cursor: pointer;
	border-color: ${(props: { roleId: number; selectedRoleId: number }) => (props.roleId === props.selectedRoleId ? '#252B48' : '#e3e3e3')};
`;

const RoleText = styled.p`
	font-size: 13px;
	font-weight: 400;
	color: #202020;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
`;

const index = () => {
	const { variableList, setSelectedVariableList } = useTTSBoardCast();

	const [options, setOptions] = useSyncState<any[]>([
		{ label: '客户信息', value: 'customer' },
		{ label: '业务信息', value: 'business' }
	]);

	const [tab, setTab] = useSyncState<string>('customer');

	const [customerVariable, setCustomerVariable] = useSyncState<any[]>([]);

	const [businessVariable, setBusinessVariable] = useSyncState<any[]>([]);

	const [roleList, setRoleList] = useSyncState<any[]>([]);

	const [selectedRole, setSelectedRole] = useSyncState<number>(0);

	//初次洗出客户信息变量和业务信息变量
	useEffect(() => {
		setCustomerVariable(variableList().filter((item: any) => item.roleId));
		setBusinessVariable(variableList().filter((item: any) => !item.roleId));
		return () => {
			setCustomerVariable([]);
			setBusinessVariable([]);
			setRoleList([]);
			setSelectedRole(0);
			setSelectedVariableList([]);
		};
	}, []);

	//客户信息变量发生变化拿到客户信息变量里面所存在的访客角色
	useEffect(() => {
		if (tab() === 'customer' && customerVariable().length !== 0) {
			let newArray: any[] = [];
			let keys = customerVariable().map(item => {
				return item.roleId;
			});
			keys = [...new Set(keys)];
			keys.forEach((id: any, index: number) => {
				const data = customerVariable().filter(item => item.roleId === id);
				newArray = [...newArray, { label: customerVariable().find(item => item.roleId === id)?.roleName, value: id }];
				if (index + 1 === keys.length) {
					setRoleList(newArray);
				}
			});
		}
	}, [customerVariable()]);

	//默认选中访客角色中的第一位
	useEffect(() => {
		if (tab() === 'customer' && roleList().length !== 0) {
			setSelectedRole(roleList()[0].value);
		}
	}, [roleList()]);

	//拿到所选中角色的变量
	useEffect(() => {
		if (tab() === 'customer' && selectedRole() !== 0) {
			setSelectedVariableList(customerVariable().filter(item => item.roleId === selectedRole()));
		}
	}, [selectedRole(), tab()]);

	useEffect(() => {
		if (tab() === 'business') {
			setSelectedVariableList(businessVariable());
		}
	}, [tab()]);

	const onChangeSegmented = (value: SegmentedValue) => {
		setTab(value.toString());
	};

	const selectRole = (roleId: number) => {
		setSelectedRole(roleId);
	};

	return (
		<VariableContainer>
			<Tabs
				options={options()}
				value={tab()}
				onChange={value => {
					onChangeSegmented(value);
				}}
			/>
			{tab() === 'customer' ? (
				<RoleListContainer>
					{roleList().map((item, index) => {
						return (
							<RoleItem roleId={item.value} selectedRoleId={selectedRole()} onClick={() => selectRole(item.value)} key={index}>
								<RoleText>{item.label}</RoleText>
							</RoleItem>
						);
					})}
				</RoleListContainer>
			) : (
				''
			)}
		</VariableContainer>
	);
};

export default index;
